<!--  -->
<template>
    <div>
        <van-form @submit="onSubmit">
            <div>

                <!-- 表头 -->
                <div class="font15 mt10 pl10">
                    <span class="titletext ">{{ (fromdata.titile) ? fromdata.title : '政策宣讲' }}</span>
                    <div class="graytext  mt10 font13">
                        <span>发起人：</span>
                        <span class="titletext">{{ fromdata.applyUser }}</span>
                    </div>

                </div>

                <!-- 基本信息 置灰 -->
                <div class="font11 mt10 bggray ptandpb10">

                    <div class=" graytext pl10">
                        <span>发起人：</span>
                        <span class="titletext">{{ fromdata.applyUser }}</span>
                    </div>

                    <div class=" graytext pl10">
                        <span>发起人单位：</span>
                        <span class="titletext">{{ fromdata.applyCompany }}</span>
                    </div>

                    <div class=" graytext pl10">
                        <span>发起人部门：</span>
                        <span class="titletext">{{ fromdata.applyDept }}</span>
                    </div>
                </div>

                <!-- 表单信息 -->
                <div>

                    <van-field readonly required input-align="left" label-width="2.5em" name="applyDate"
                        :value="fromdata.applyDate" label="时间:" :rules="[{ required: true, message: '' }]" />

                    <van-field readonly required input-align="left" label-width="4.5em" name="learnForm"
                        :value="fromdata.learnForm" label="学习形式:" :rules="[{ required: true, message: '' }]" />

                    <van-field readonly required input-align="left" label-width="8.5em" name="count" :value="fromdata.count"
                        label="部署落实举措条数:" :rules="[{ required: true, message: '' }]" />

                    <van-field readonly required input-align="left" label-width="2.5em" name="title" :value="fromdata.title"
                        label="标题:" :rules="[{ required: true, message: '' }]" />

                    <van-field readonly required input-align="left" label-width="4.5em" name="participants"
                        :value="fromdata.participants" label="参加人员:" :rules="[{ required: true, message: '' }]" />

                    <van-field type="textarea" readonly required input-align="left" label-width="4.5em" name="remark"
                        :value="fromdata.remark" label="学习内容:" :rules="[{ required: true, message: '' }]" />


                </div>

                <!-- 附件 -->
                <div class="border-b-1">
                    <van-field label-width="10em" readonly name="content" label="附件:" class="lyy-width" input-align="left"
                        placeholder="">
                    </van-field>

                    <template>
                        <template>
                            <div v-for="(item, index) in fromdata.formFiles" :key="index" class="fileBox">
                                <div readonly class="font14 fileLink" style="color:#0F85CF">

                                    <a target="_blank" @click="openFileUrlfun(item.anonymousFilePath)">{{ item.fileName
                                    }}</a>

                                </div>
                            </div>
                        </template>
                    </template>

                </div>
                <div v-if="showHistory" class="spline"></div>
                <van-field readonly center v-if="showHistory" label="当前办理人:" label-width="5.5em" />
                <div v-if="showHistory" class="font13 ptandpb10 pl16">
                    <div>
                        <span class="titletext font13">{{ historydata.workItemApproverUser }}</span>
                    </div>
                    <div class="mt5">
                        <span class="graytext font12 ">{{ historydata.activityInstName }}</span>
                    </div>
                </div>
                <!-- 审批意见 -->
                <div>
                    <div class="spline"></div>
                    <div style="padding-bottom: 42px">
                        <div class="stitle font14">审批意见</div>
                        <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
                            <div class="spiece_flex" v-for="(item, index) in approveList" :key="index">
                                <div class="vertical-a-t display-ib" style="width: 25px">
                                    <i v-if="index == 0" class="iconfont icon-current font16 color-red2"></i>
                                    <i v-if="index > 0" class="iconfont icon-yiban font16 color-theme"></i>
                                    <div v-if="index != (approveList.length - 1)" class="optionline"></div>
                                </div>
                                <div class="vertical-a-t display-ib" style="width: calc(100%)">
                                    <div style="white-space: nowrap">
                                        <span class="color-theme font14">{{ item.PRODUCERNAME || "暂无" }}：</span>
                                        <span class="color-2 font14">{{
                                            item.CONTENT || "暂无"
                                        }}</span>
                                    </div>
                                    <div class="mt05 color-8" style="display: flex; align-items: baseline">
                                        <div class="display-ib vertical-a-t font12" style="margin-top: 2px;width: 100%">
                                            {{ item.ORGNAME || "暂无" }}
                                        </div>
                                        <div class="display-ib vertical-a-t font12 text-r"
                                            style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%">
                                            {{ item.MODIFIEDTIME || "暂无" }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div class="color-9 font12 text-c">暂无数据</div>
                        </div>
                    </div>
                </div>

            </div>

            <div v-show="todoType || isdraw" class="footer">
                <van-button block type="info" native-type="submit">流转下一步</van-button>
            </div>

        </van-form>
    </div>
</template>

<script>
import { getDYYTDetail, getOpinionDetail, getDYYTHistory } from '@/api/dwdyytAPI'
import { Toast, Dialog, Notify } from 'vant'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { openFileUrl } from '@/store/openFile'
export default {
    components: {

    },
    name: 'zcxjdetail',
    data() {
        return {
            isdraw: false,
            params: this.$route.query,
            fromdata: {},
            showPicker: false,
            approveList: [],
            todoType: false,
            showHistory: false,
            historydata: {},
        }
    },
    computed: {
        ...mapGetters(['user']),
    },
    //生命周期--创建完成
    created() {
        if (this.params.todoType == '1') {
            this.todoType = true;
            this.showHistory = false;
        } else {
            this.todoType = false;
            this.showHistory = true;
        }
        this.isdraw = false;
        this.getDetail();
    },
    activated() {
        console.log("activatedactivatedactivated");
    },
    //生命周期--挂载完成
    mounted() {

    },
    //方法调用
    methods: {
        openFileUrlfun(value) {
            this.$router.push(
                {
                    name: 'fileview',
                    query: {
                        openFileUrl: openFileUrl(value)
                    }
                }
            );
        },
        getDetail() {
            Toast.loading({
                message: "加载中...",
                forbidClick: false,
            });
            getDYYTDetail(Object.assign(this.params, { userName: this.user.userName }))
                .then((result) => {
                    Toast.clear();
                    if (!result.data) {
                        Notify(result.message);
                        return;
                    }
                    this.fromdata = result.data.data;
                }),
                getOpinionDetail(Object.assign(this.params), { userName: this.user.userName })
                    .then((result) => {
                        if (!result.data) {
                            Notify(result.message);
                            return;
                        }
                        this.approveList = result.data.data.reverse();
                    })
            if (this.showHistory) {
                getDYYTHistory(Object.assign(this.params), { userName: this.user.userName })
                    .then((result) => {
                        Toast.clear();
                        if (!result.data) {
                            Notify(result.message);
                            return;
                        }
                        if (result.data.data) {
                            //数据过滤，并生成新的数组
                            this.historydata = result.data.data.filter(item => item.currentState == 10)[0]
                            if (this.historydata) {
                                if (this.historydata.workItemApproverUser) {
                                    this.showHistory = true;
                                } else {
                                    this.showHistory = false;
                                }
                            } else {
                                this.showHistory = false;
                            }
                        } else {
                            this.showHistory = false;
                        }
                    })
            }

        },
        onSubmit(values) {
            console.log('values' + JSON.stringify(values))
            this.fromdata.type = "C";
            this.$router.push(
                {
                    name: 'dwdyytSubmit',
                    params: {
                        formData: this.fromdata,
                        idcode: this.params
                    }
                }
            );
        },
    }
}
</script>
<style  scoped>
/* @import url();*/
.mt10 {
    margin-top: 10px
}

.mt5 {
    margin-top: 5px
}

.bggray {
    background-color: whitesmoke;
}

.pl10 {
    padding-left: 10px;
}

.ptandpb10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.chosebox {
    width: 100px;
    display: inline;
}

.van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 80px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;

}

.van-cell__right-icon {
    height: 36px;
    font-size: 16px;
    line-height: 36px;
    margin-right: 6px;
}

.el-table .cell {

    line-height: 12px;

}
</style>